<template>
  <div class="main">
    <div class="myschedule">
  <el-calendar  v-model="currDay">
    <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
    <!--  slot = "dateCell"定义对象来控制单元格  slot-scope 把data 循环成date 就会循环生成p块在 p块click调用处理-->
    <template
      slot="dateCell"
      slot-scope="{date, data}">
      <p>
        {{ data.day.split('-').slice(1).join('-') }}
         <div class="content">{{dealMyDate(data.day)}}</div>
      <div style="position: absolute;width: 100%;height: 85px;z-index: 1;bottom: 0px;" @click="setOrder(data)"></div>
    </template>
  </el-calendar>
    </div>
      <confirmOrder v-if="confirmDialogIsShow" ref="showAddOrder"></confirmOrder>
  </div>
</template>

<script>
  import confirmOrder from '@/components/front/restaurant/confirmOrder.vue'
  import utilsFD from "../../../../../static/js/utils";
    export default {
        name: "schedule",
      components : {
        confirmOrder
      },

        data() {
          return {
            rno:"",
            currDay:utilsFD.FD.Fd().initCNDate(new Date()),
            cheforder:[],
            resDate: [
              // {"date":"2021-05-26","content":"放假"},
            ],
            confirmDialogIsShow: false,
            scheduleDialogIsShow:false
          }
        },
        methods:{
          dealMyDate(v) {
           // console.log()
            let len = this.resDate.length
            let res = ""
            for(let i=0; i<len; i++){
              if(this.resDate[i].date == v) {
                res = this.resDate[i].content
                break
              }
            }
            return res
          },
          setOrder:function(data){
            console.log("----22------")
           // console.log(data.day)
            let order;
           // console.log(this.orderForm)
            for (var index in this.cheforder){
              order = this.cheforder[index]
               if(data.day >= utilsFD.FD.Fd().initCNDate(new Date(order.cubegindate)) && data.day <= utilsFD.FD.Fd().initCNDate(new Date(order.cuenddate))){

                break;
              }

            }

              let _this = this;
              _this.confirmDialogIsShow = true;
              _this.$nextTick(() => {
               // console.log(_this.$refs)
                this.$refs.showAddOrder.init(order);
              });
          },
          init(resDate) {
            this.resDate = resDate;
            this.scheduleDialogIsShow = true;

          },
          handleClose() {
            this.scheduleDialogIsShow = false;
            //给父组件传参
            this.$emit("scheduleDialogIsShow", this.scheduleDialogIsShow);
          }
        },
      //监听
      watch: {
        dialogisShow(newValue, oldValue) {
          this.scheduleDialogIsShow = newValue;
        }
      }

      }
</script>

<style  lang="stylus">
  .el-calendar-table
    .el-calendar-day
      position: relative
  .is-selected
    color: #f63a4c
  .myschedule


  .el-calendar
    text-align center
    p
     margin 0
     padding 0

    white-space: pre-line;

</style>
